<style scoped lang="scss">
    .searchBarWrapper {
        position: absolute;
        top: 40px;
        width: 100%;
        z-index: 998;
        padding-left: 20px;
        left: 0px;
        background: #fff;
    }
    
    .supplierBlock {
        display: flex;
        margin-bottom: 20px;
        
        .erpimage {
            width: 55px;
        }
        
        .rightContainer {
            padding-left: 10px;
            
            h3 {
                padding: 0px;
                margin: 0px;
                padding-bottom: 10px;
            }
        }
        
        
    }
    
    .wrapperSubmitButton {
        position: fixed;
        bottom: 0px;
        left: 0px;
        padding-bottom: 20px;
        padding-top: 20px;
        padding-left: 20px;
        width: 100%;
        background: #fff;
        
        .submitButton {
            border-radius: 20px;
            width: 90%;
        }
    }
    
    
    ::v-deep .valueClass {
        text-align: left;
        padding-left: 10px;
        color: #222;
    }


</style>
<template>
    <div>
        <van-cell
                title-style="width:100px;flex:none;"
                value-class="valueClass"
                @click="show = true" is-link
        >
            <template #title>
                <span class="custom-title"
                      style="color: #646566;width: 100px;">供应商&nbsp;<i class="red">*</i></span>
            </template>
            <template #value>
                <span>{{supplierName||'请选择供应商'}}</span>
            </template>
        </van-cell>
    
    </div>
    <van-action-sheet v-model:show="show" title="选供应商">
        <div class="content">
            <div style="min-height:600px;;">
                <div class="searchBarWrapper">
                    <van-search v-model="queryParams.searchNo" style="width: 90%"
                                placeholder="请输入供应商名称"
                                @search="onSearch"
                                :autofocus="true"
                    />
                </div>
                
                <section>
                    <!--供应商信息-->
                    <van-pull-refresh v-model="loading" @refresh="onRefresh">
                        <div style="min-height:600px;padding:15px;margin-bottom:60px;margin-top: 50px;">
                            <van-radio-group v-model="supplierId" :max="1">
                                <div v-for="(supplier,index) in dataList" :key="index"
                                     class="supplierBlock"
                                >
                                    <van-radio :name="supplier.id"
                                    ></van-radio>
                                    <section style="display: flex;margin-left:5px;">
                                        <erp-image :src="completeFilePath(supplier.imgUrl)" class="erpimage"
                                        ></erp-image>
                                        <div class="rightContainer">
                                            <h3>
                                                {{supplier.name}}
                                            </h3>
                                            <div>
                                                <dic-tag v-model:value="supplier.supplierType"
                                                         :code="$dic.supplier.supplier_type"></dic-tag>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </van-radio-group>
                        </div>
                    </van-pull-refresh>
                    
                    <div class="wrapperSubmitButton">
                        <van-button type="primary"
                                    block @click="trigerSubmit"
                                    class="submitButton"
                        >确定
                        </van-button>
                    </div>
                
                </section>
            </div>
        </div>
    </van-action-sheet>
</template>
<script lang="ts">
    import {defineComponent} from 'vue';
    import * as api from '@/api/supplier.api'
    import {Supplier} from "@/types/supplier";
    import ErpImage from '@/components/ErpImage/index.vue'
    import DicTag from '@/components/DicTag/dic-tag.vue';
    import {concatList, findInArray} from "@/utils/lodashUtils";
    import {alertFail} from "@/utils/alertUtils";

    interface IData {
        dataList: Supplier[];

        [prop: string]: any;
    }

    export default defineComponent({
        data() {
            return {
                loading: false,
                show: false,
                total: 0,
                queryParams: {
                    searchNo: '',
                    supplierName: "",
                    pageSize: 10,
                    pageNum: 1,
                    state: 5,
                },
                dataList: [],
                supplierId: "",
                supplierName: "",

                checkedSupplierId: '',
            } as unknown as IData;
        },
        props: {
            _supplierId: {
                type: [String, Object]
            },
            _supplierName: {
                type: [String, Object]
            },
        },
        watch: {
            "$props._supplierName"(name) {
                this.supplierName = name
            }

        },
        mounted() {
            this.getInfoList();
        },
        components: {
            ErpImage,
            DicTag,
        },
        methods: {
            onSearch() {
                this.queryParams.pageNum = 1;
                this.dataList = [];
                this.getInfoList();
            },

            initByDialog() {
                this.show = true;
            },
            triggerShow() {
                this.show = true;
            },
            async getInfoList() {
                var result = await api.getList(this.queryParams);
                this.total = result.count || 0;
                var supplierList = result.data || [];
                console.log('供应商列表', supplierList);
                this.dataList = supplierList
            },

            trigerSubmit() {
                var supplierId = this.supplierId
                console.log('选中的 供应商', supplierId)
                if (!supplierId) {
                    alertFail('请选择供应商')
                    return false
                }
                var supplierOne = findInArray(this.dataList, item => item.id == this.supplierId)


                if (supplierOne && supplierOne.id) {
                    this.supplierName = supplierOne.name
                }

                this.$emit('update:_supplierId', this.supplierId)
                this.$emit('update:_supplierName', this.supplierName)
                this.$emit('change', {
                    supplierId: this.supplierId,
                    supplierName: this.supplierName,
                    supplierCode: supplierOne && supplierOne.code
                })
                this.show = false;
            },

            async onRefresh() {
                this.queryParams.pageNum = Number(this.queryParams.pageNum) + 1;
                var result = await api.getList(this.queryParams);
                this.total = result.count || 0;
                var supplierList = result.data || [];
                concatList(this.dataList, supplierList, 'id')
                console.log('新的数据是', this.dataList)
                this.loading = false

            },

            getlist() {

            }


        }
    });
</script>
